extends ../layouts/default

block content
	div(style="padding-left: 5vw; padding-right: 5vw;").jumbotron
		h1 KeystoneJS Demo
		.lead This site demonstrates common patterns in <a href='http://keystonejs.com', target='_blank'>KeystoneJS</a>.
		a(href='http://github.com/keystonejs/keystone-demo', target='_blank', title='View on GitHub').btn.btn-lg.btn-primary View on GitHub
		a(href='http://www.keystonejs.com/docs', target='_blank', title='KeystoneJS Documentation').btn.btn-lg.btn-link Read the Docs
			
	.row
		.col-sm-8
			h3: a(href='/blog') Blog
			//- p Simple example blog with posts and categories.
			p Posts have a key automatically generated from their name, and support short and extended versions of the content.
			p You can sign in using the demo account to contribute to the blog.
			hr
			h3: a(href='/gallery') Gallery
			p Example of how to set up a page that displays multiple image galleries.
			p Demonstrates usage of single and multi image fields and their resizing methods.
			p You can sign in using the demo account to create and manage image galleries, and upload additional images
			hr
			h3: a(href='/contact') Enquiries
			p Simple contact form that validates input and logs enquiries to the database.
			p You can sign in using the demo account to view the submitted enquiries.
			hr
			h3 Generating CSVs
			p For an example of how to download a list in .csv format, see /routes/download/users.js.
			p It uses the excellent node-csv library.
			a(href='/download/users').btn.btn-default Download users.csv
		.col-sm-4
			.panel.panel-default
				.panel-heading
					h3.panel-title: a(href='/keystone/signin') Admin UI
				.panel-body
					p Keystone includes session management and default sign-in and sign-out views.
					p Sign in with the username <code>demo@keystonejs.com</code> and the password <code>demo</code>
					if user
						a(href='/keystone').btn.btn-default Open Admin UI
						a(href='/keystone/signout').btn.btn-link Sign out
					else
						a(href='/keystone/signin').btn.btn-default Sign in
				
			.panel.panel-default
				.panel-heading
					h3.panel-title: a(href='/404') Error Handling
				.panel-body
					p The 404 and 500 views demonstrate how to set up error handlers for your application.
					a(href='/hey-this-isnt-a-valid-url').btn.btn-default Test it
	
	div(style="margin-top: 60px; padding-left: 10vw; padding-right: 10vw;").jumbotron.text-center
		h2 We'll handle the back end, you handle the front
		p KeystoneJS isn't opinionated about how you design or build the front-end of your site. Use jQuery, Angular, React.js with LESS, SASS or css-modules and any node.js template language.
		div We've made this demo site with Bootstrap, Jade and LESS to show how simple it can be to get going, and included some themes from <a href="https://bootswatch.com/?ref=keystonejs" target="_blank">bootswatch</a>. Try them out by selecting below:
		if themes && themes.length
			hr(style="margin-bottom: 3em; margin-top: 3em;")
			ul.nav.nav-pills
				each theme in themes
					li(class=currentTheme === theme ? 'active' : '')
						a(href='/?theme=' + theme)= theme
